<template>
  <view class="wrapper row">
    <view class="top">
      <view class="bg"></view>
      <view class="detail pd_t_30 pd_l_30 pd_b_30 row">
        <block>
          <image :src="details.imgUrl" class="school_icon"></image>
        </block>
        <view>
          <view class="title color-333 font-36 font-b pd_b_20">{{details.schoolName}}</view>
          <view class="item row font-28 u-m-b-20 color-666">
            <view class="label">所在地：</view>
            <view>{{details.provinceName || ''}}</view>
          </view>
          <view class="item row font-28 u-m-b-20 color-666">
            <view class="label">教育行政主管部门：</view>
            <view class="color-666">{{details.agencyName || ''}}</view>
          </view>
          <view class="item u-flex u-flex-wrap font-28 u-m-b-20">
            <view class="school_tag font-20 school_tag_0">{{details.schoolType}}</view>
            <view class="school_tag font-20"
                  :class="{
                          school_tag_1: indexs == 0 || indexs > 5,
                          school_tag_2: indexs == 1,
                          school_tag_3: indexs == 2,
                          school_tag_4: indexs == 3,
                          school_tag_5: indexs == 4,
                          school_tag_6: indexs == 5
                        }"
                  :key="indexs"
                  v-if="item != '-'"
                  v-for="(item, indexs) in details.typeId">{{item}}</view>
          </view>
        </view>
      </view>
    </view>
    <u-tabs-swiper :active-color="TEXT_ACTIVE_COLOR" ref="uTabs"
                   :font-size="28"
                   :list="list" :current="current" @change="tabsChange" :is-scroll="false"
                   swiperWidth="750"></u-tabs-swiper>
    <view class="empety"></view>
    <swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish" class="swipper-wrp">
      <!--简介-->
      <swiper-item class="swiper-item">
        <scroll-view scroll-y style="height: 100%">
          <view class="scroll_inner pd_t_20 pd_b_20">
            <view class="title font-28 color-333 row">
              <view class="border"></view>
              <view>基本信息</view>
            </view>
            <view class="u-font-sm pd_t_20 pd_b_30 u-p-l-20 color-666">
              <view class="pd_b_10 row">
                博士点：{{details.doctorPoint || ''}}
              </view>
              <view class="pd_b_10 row">
                硕士点：{{details.masterPoint || ''}}
              </view>
              <view class="pd_b_10 row">
                官网地址：{{details.officialWeb || ''}}
              </view>
              <view class="pd_b_10 row">
                招办电话：{{details.recruitTel || ''}}
              </view>
              <view class="pd_b_10 row">
                地址：{{details.schoolAddress || ''}}
              </view>
            </view>

            <view class="title font-28 color-333 row">
              <view class="border"></view>
              <view>院校介绍</view>
            </view>
            <showMore :txt="details.schoolDesc"></showMore>

            <view class="title font-28 color-333 row">
              <view class="border"></view>
              <view>学校领导</view>
            </view>
            <showMore :txt="details.schoolLeader"></showMore>

            <view class="title font-28 color-333 row">
              <view class="border"></view>
              <view>学校环境</view>
            </view>
            <showMore :txt="details.schoolCondition"></showMore>

            <view class="title font-28 color-333 row">
              <view class="border"></view>
              <view>院系设置</view>
            </view>
            <showMore :txt="details.facultySetting"></showMore>
          </view>
        </scroll-view>
      </swiper-item>
      <!--录取分数-->
      <swiper-item class="swiper-item">
        <block v-if="loginFlag">
          <dropMenu :options="options"
                    defautlProvince
                    liandong
                    @choose="chooseBack"
                    v-if="current == 1"
                    :provinceNameData="provinceNameData"
                    :wOrLData="wOrLData"
                    :yearData="yearData"
                    :admissionsTimesData="admissionsTimesData"></dropMenu>
          <scroll-view scroll-y style="height: calc(100% - 80rpx);">
            <view class="table" style="width: 96%;margin: 0 auto">
              <view class="th bg-f2f2f2 row cont-center flex-around">
                <view class="td color-active u-font-sm pd_t_20 pd_b_20 flex-1 u-text-center">专业名称</view>
                <view class="td color-active u-font-sm pd_t_20 pd_b_20 flex-1 u-text-center">平均分</view>
                <view class="td color-active u-font-sm pd_t_20 pd_b_20 flex-1 u-text-center">最低分/位次</view>
              </view>
              <block v-if="showData.length">
              <view v-for="(item, index) in showData" :key="index">
                <view class="th row cont-center flex-around" :class="{'bg-f2f2f2': index % 2 != 0}">
                  <view class="td flex-1 u-font-sm pd_t_20 pd_b_20 u-text-center">{{item.specialtyName}}</view>
                  <view class="td flex-1 u-font-sm pd_t_20 pd_b_20 u-text-center">{{item.averageScore}}</view>
                  <view class="td flex-1 u-font-sm pd_t_20 pd_b_20 u-text-center">{{item.lowestScore}}/{{item.lowestRank}}</view>
                </view>
              </view>
              </block>
              <view class="u-font-sm u-text-center u-padding-30" v-if="showData.length == 0">暂无数据</view>
            </view>
            <view class="color-999 text-cent font-20 u-p-b-30 u-p-t-30" v-if="showData.length">数据仅供参考，最终以高校与考试院公布为准！</view>
          </scroll-view>
        </block>
        <view v-else style="height: 100%">
          <go_login></go_login>
        </view>
      </swiper-item>
      <!--专业-->
      <swiper-item class="swiper-item">
        <scroll-view scroll-y style="height: 100%">
          <view class="scroll_inner pd_t_20 pd_b_20">
            <blick v-for="(i,d) in details.specialtySchoolRelationList" :key="d" v-if="details.specialtySchoolRelationList.length">
              <view class="title font-28 color-333 row">
                <view class="border"></view>
                <view>{{i.path}}</view>
              </view>
              <view class="u-font-sm pd_t_20 u-m-b-30 u-p-l-20 color-666 row u-flex-wrap">
                <view class="school_tag u-font-sm bg-ECECEC u-m-b-10"
                      v-for="(each, per) in i.data" :key="per"
                      @click="showIntroduce(each.cultureIntroduce)"
                      :class="{'zhuanye_tag': each.cultureIntroduce != ''}"
                      style="padding: 10upx; height: auto;line-height: auto">{{each.specialtyName}}</view>
              </view>
            </blick>
            <view  v-if="!details.specialtySchoolRelationList.length" class="u-text-center u-p-t-100 color-999 u-font-sm">
              暂无数据
            </view>
          </view>
        </scroll-view>
      </swiper-item>
      <!--招生简章-->
      <swiper-item class="swiper-item">
        <scroll-view scroll-y style="height: 100%">
          <view class="scroll_inner pd_t_20 pd_b_20">
            <view class="title font-28 color-333 row">
              <view class="border"></view>
              <view>招生简章</view>
            </view>
            <view class="u-font-sm pd_t_20 pd_b_30 color-666">
              <u-cell-group>
                <u-cell-item use-label-slot v-for="(item, index) in details.compassAdmissionsGuideList"
                             value="详情" :key="index" :index="index"
                             @click="showDetails(item)">
                  <view slot="label" class="u-flex">
                    <view class="color-333 u-font-sm" style="margin-right: 20upx">{{item.createTime && item.createTime.split(" ")[0]}}</view>
                    <view class="color-333 u-font-sm eclipse" style="width: 370rpx">{{item.guideName}}</view>
                  </view>
                </u-cell-item>
              </u-cell-group>
            </view>
          </view>
        </scroll-view>
      </swiper-item>
      <!--食宿-->
      <swiper-item class="swiper-item">
        <scroll-view scroll-y style="height: 100%">
          <view class="scroll_inner pd_t_20 pd_b_20">
            <view class="title font-28 color-333 row">
              <view class="border"></view>
              <view>宿舍情况</view>
            </view>
            <showMore :txt="details.hostelDesc"></showMore>

            <view class="title font-28 color-333 row">
              <view class="border"></view>
              <view>食堂情况</view>
            </view>
            <showMore :txt="details.diningHall"></showMore>
          </view>
        </scroll-view>
      </swiper-item>
      <!--奖学金-->
      <swiper-item class="swiper-item">
        <scroll-view scroll-y style="height: 100%">
          <view class="scroll_inner pd_t_20 pd_b_20">
            <view class="title font-28 color-333 row">
              <view class="border"></view>
              <view>奖学金介绍</view>
            </view>
            <showMore :txt="details.scholarship"></showMore>

            <view class="title font-28 color-333 row">
              <view class="border"></view>
              <view>困难生资助办法</view>
            </view>
            <showMore :txt="details.difficultStudent"></showMore>
          </view>
        </scroll-view>
      </swiper-item>
      <!--录取规则-->
      <swiper-item class="swiper-item">
        <scroll-view scroll-y style="height: 100%">
          <view class="scroll_inner pd_t_20 pd_b_20">
            <view class="title font-28 color-333 row">
              <view class="border"></view>
              <view>录取批次安排</view>
            </view>
            <showMore :txt="details.admissionBatch"></showMore>

            <view class="title font-28 color-333 row">
              <view class="border"></view>
              <view>对艺术类招生的录取办法</view>
            </view>
            <showMore :txt="details.artAdmissions"></showMore>

            <view class="title font-28 color-333 row">
              <view class="border"></view>
              <view>加分政策</view>
            </view>
            <showMore :txt="details.bonusPolicy"></showMore>

            <view class="title font-28 color-333 row">
              <view class="border"></view>
              <view>对少数民族考生的特殊政策</view>
            </view>
            <showMore :txt="details.minorityCandidates"></showMore>

            <view class="title font-28 color-333 row">
              <view class="border"></view>
              <view>对往届生的录取政策</view>
            </view>
            <showMore :txt="details.pastStudents"></showMore>

            <view class="title font-28 color-333 row">
              <view class="border"></view>
              <view>转专业的实施办法</view>
            </view>
            <showMore :txt="details.changeMajor"></showMore>

            <view class="color-999 text-cent font-20 u-p-b-30 u-p-t-30">数据仅供参考，最终以高校与考试院公布为准！</view>
          </view>
        </scroll-view>
      </swiper-item>
    </swiper>
    <u-popup v-model="guideShow" mode="bottom" border-radius="16">
      <div class="popup-container bg-fff pd_t_50 pd_b_45" style="height: 900upx">
        <div class="font-28 font-b pd_b_45 text-cent">{{currentGuide.guideName}}</div>
        <scroll-view scroll-y style="height: 660upx;" class="font-26 col-666 pd_b_70">
          <text>{{currentGuide.guideDesc}}</text>
          <view class="color-999 text-cent font-20 u-p-t-30" v-if="currentGuide.guideTime">数据更新时间：{{currentGuide.guideTime}}</view>
          <view class="color-999 text-cent font-20 u-p-b-30 u-p-t-15">数据仅供参考，最终以高校与考试院公布为准！</view>
        </scroll-view>
        <div class="confirm-btn text-cent col-fff font-26 bg-FF8B37 u-p-t-20">
          <u-button type="primary" :custom-style="customStyle" shape="circle" @click="guideShow = false">确定</u-button>
        </div>
      </div>
    </u-popup>
    <u-popup v-model="introduceShow" mode="bottom" border-radius="16">
      <div class="popup-container bg-fff pd_t_50 pd_b_45" style="height: 900upx">
        <scroll-view scroll-y style="height: 740upx;" class="font-26 col-666 pd_b_70">
          <text>{{currentIntrduce}}</text>
        </scroll-view>
        <div class="confirm-btn text-cent col-fff font-26 bg-FF8B37 u-p-t-20 u-p-b-20">
          <u-button type="primary" :custom-style="customStyle" shape="circle" @click="introduceShow = false">确定</u-button>
        </div>
      </div>
    </u-popup>
  </view>
</template>

<script>
  import {request} from "../../util/api";
  import mixins from "./mixins";
  import dropMenu from '@/components/my_dropmenu/index'
  import go_login from "../../components/go_login";
  import showMore from "../../components/showMore";
  import {getCurrentFullPath} from "../../util/util";
  import themeMixins from "../mixins/themeMixins";

  export default {
    mixins: [mixins,themeMixins],
    components: {
      dropMenu,
      go_login,
      showMore
    },
    onLoad(option) {
      this.getList(option.id)
      /*if (option.current) {
        this.current = option.current
        this.swiperCurrent = option.current
      }*/
    },
    data() {
      return {
        list: [
            {
          name: '院校简介'
        }, {
          name: '录取分数'
        }, {
          name: '专业介绍'
        }, {
          name: '招生简章'
        }, {
          name: '食宿介绍'
        }, {
          name: '奖学金介绍'
        }, {
          name: '录取规则'
        }],
        current: 0, // tabs组件的current值，表示当前活动的tab选项
        swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
        value1: '',

        details: {},
        options: ['provinceName', 'wOrL', 'year', 'admissionsTimes'],
        showData: [],
        guideShow: false,
        currentGuide: {},
        customStyle: {
          background: '#1F476D'
        },
        admissionsTimesData: [],
        provinceNameData: [],
        wOrLData: [],
        yearData: [],
        introduceShow: false,
        currentIntrduce: ''
      }
    },
    methods: {
      getList(id) {
        request({
          url:'/system/wx/CompassUniversityInfo/' + id,
          token: true,
          errorFn: true
        }).then(res => {
          res.data.typeId = res.data.typeIds.replace(/^\s+|\s+$/g, '').split(" ")
          res.data.specialtySchoolRelationList = this.groupByName(res.data.specialtySchoolRelationList, 'firstSpeName')
          console.log(res.data.specialtySchoolRelationList)
          this.details = res.data
          this.getScoreLine()
        }).catch(res => {
          uni.navigateBack()
        })
      },

      groupByName(arr, key) {
        let map = {}
        for (let i = 0; i < arr.length; i++) {
          let ai = arr[i]
          if (!map[ai[key]]) {
            map[ai[key]] = [ai]
          } else {
            map[ai[key]].push(ai)
          }
        }
        let res = []
        Object.keys(map).forEach(keys => {
          res.push({
            path: keys,
            data: map[keys],
          })
        })
        return res
      },


      // 获取录取分数线
      getScoreLine(option) {
        request({
          url: '/system/wx/CompassRecruitScore/list',
          token: true,
          not_loading: true,
          data: option ? Object.assign(option, {
            schoolName: this.details.schoolName
          }) : {
            schoolName: this.details.schoolName,
            admissionsAddress: '重庆'
          }
        }).then(res => {
          let {addressList, timesList, recruitScoreList, typeList, yearList} = res.data
          this.showData = recruitScoreList
          this.details.compassRecruitScoreList = recruitScoreList
          this.admissionsTimesData = timesList.map(item => {
            return {dictValue: item}
          })
          this.provinceNameData = addressList.map(item => {
            return {dictValue: item}
          })
          this.wOrLData = typeList.map(item => {
            return {dictValue: item}
          })
          this.yearData = yearList.map(item => {
            return {dictValue: item}
          })
        })
      },

      chooseBack(res) {
        let {wOrL, provinceName, year, admissionsTimes} = res
        this.getScoreLine({
          admissionsAddress: provinceName,
          wOrL: wOrL || '', year: year || '', admissionsTimes: admissionsTimes || ''
        })
        return
        /*var retObj = this.details.compassRecruitScoreList.filter(item => {
          let ret = true
          if (wOrL && wOrL != item.worL) {
            ret = false
          }
          if (provinceName && provinceName != item.admissionsAddress) {
            ret = false
          }
          if (year && year != item.year) {
            ret = false
          }
          if (admissionsTimes && admissionsTimes != item.admissionsTimes) {
            ret = false
          }
          if (ret) return item
        })
        this.showData = retObj*/
      },

      showDetails(res) {
        this.guideShow = true
        this.currentGuide = res
      },

      showIntroduce(res) {
        if (res) {
          this.introduceShow = true
          this.currentIntrduce = res
        }
      },

      // tabs通知swiper切换
      tabsChange(index) {
        this.swiperCurrent = index;
      },
      // swiper-item左右移动，通知tabs的滑块跟随移动
      transition(e) {
        let dx = e.detail.dx;
        this.$refs.uTabs.setDx(dx);
      },
      // 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
      // swiper滑动结束，分别设置tabs和swiper的状态
      animationfinish(e) {
        let current = e.detail.current;
        this.$refs.uTabs.setFinishCurrent(current);
        this.swiperCurrent = current;
        this.current = current;
      }
    },
    onShareAppMessage(res) {
      return {
        path: getCurrentFullPath()
      }
    }
  }
</script>

<style scoped lang="scss">
  $active_color: #2A6AAA;
  .popup-container {
    width: 100%;
    padding-left: 5%;
    padding-right: 5%;
  }
  .wrapper {
    flex-direction: column;
    height: 100%;
    .top {
      position: relative;
      .bg {
        background-image: linear-gradient(rgb(39,148,217), rgb(156,210,244));
        height: 260upx;
        border-radius: 0 0 100upx 100upx;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        width: 100%;
      }
      .detail {
        width: 92%;
        margin: 0 auto;
        box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.4);
        border-radius: 16upx;
        z-index: 10;
        background: #fff;
        margin-top: 20upx;
        .title, .item {
          z-index: 1;
        }
        .school_icon {
          width: 150upx;
          height: 150upx;
          margin-right: 20upx;
          border-radius: 100%;
        }
      }
    }
    .empety {
      height: 20upx;
      background: #f7f7f7;
    }
    .swipper-wrp {
      flex: 1;
      .scroll_inner {
        width: 92%;
        margin: 0 auto;
        .title {
          padding-top: 20upx;
          .border {
            width: 4px;
            background: $active_color;
            margin-right: 20upx;
          }
        }
      }
    }
    .show-more {
      border-top: 1px solid #f7f7f7;
      padding-top: 5upx!important;
      font-size: 24upx!important;
    }
    .bg-ECECEC {
      background: #ECECEC;
    }
  }
  .zhuanye_tag {
    background: $active_color!important;
    color: #fff;
  }
</style>
